<template>
  <div>
    <header class="my-header">
      <a @click="toEditAvatar">
        <img :src="myInfo.avatar" class="avatar">
      </a>
      <section class="my-header-info">
        <span class="my-info-name">{{myInfo.name}}</span>
        <span class="my-info-ps">{{myInfo.ps}}</span>
      </section>
    </header>
    <section class="my-participate">
      <a href="#" class="f-left my-par-btn">
        <van-icon name="star" color="#ea6c2f" size="2rem" class="display-block"></van-icon>
        <span class="display-block ta-center">我的收藏</span>
      </a>
      <a href="#" class="f-left my-par-btn">
        <van-icon name="smile-comment" color="#6262e8" size="2rem" class="display-block"></van-icon>
        <span class="display-block ta-center">我的评论</span>
      </a>
      <a href="#" class="f-left my-par-btn">
        <van-icon name="youzan-shield" color="#f14f4f" size="2rem" class="display-block"></van-icon>
        <span class="display-block ta-center">我的点赞</span>
      </a>
      <a href="#" class="f-left my-par-btn">
        <van-icon name="underway" color="#0d9e0d" size="2rem" class="display-block"></van-icon>
        <span class="display-block ta-center">浏览历史</span>
      </a>
    </section>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'
  export default {
    name: 'my',
    data() {
      return {
        myInfo: {
          name: 'tacen',
          avatar: 'http://pkvxvwxpl.bkt.clouddn.com/WechatIMG2.png',
          ps: '这是我的个性签名ewqewqewqe发范德萨额我企鹅我企鹅我企鹅发大水发wqewqeeqwqwewqewqe'
        }
      }
    },
    components:{
    },
    methods:{
      ...mapActions({
        showSuccessToast: 'base/showSuccessToast'}),
      toEditAvatar(){
          this.showSuccessToast({
            message:'这是什么'
          });
      }
    },
    mounted() {
      this.$store.state.base.tabbarActive = 3;
    }

  }

</script>

<style lang="scss">
  @import "../../assets/scss/my/my";

</style>
